<template>
    <div class='chatmain'>
         俄罗斯方块

         {{keyPrees}}
         {{testJInac}}
         <div :style="brickStylefu"></div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        testJInac:300,
        keyPrees:0,
        brickStylefu:"width: 20px;height: 20px;position:absolute;top:300px;right: 400px;background-color: brown;"
      };
    },
    created(){
        let that=this;
         document.onkeydown = function(e) {
            //事件对象兼容
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
            //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
            //左
            if (e1 && e1.keyCode == 37) {
                that.keyPrees=e1.keyCode
            } else if (e1 && e1.keyCode == 38) {
                that.keyPrees=e1.keyCode
            } else if (e1 && e1.keyCode == 39) {
               that.keyPrees=e1.keyCode
            } else if (e1 && e1.keyCode == 40) {
                that.keyPrees=e1.keyCode
            }
        }
        setInterval(function(){
            that.testJInac=that.testJInac+10
            that.brickStylefu="width: 20px;height: 20px;position:absolute;top:"+that.testJInac+"px;right: 600px;background-color: brown;"
        },1000);
    },watch:{
        keyPrees(newa,oldb){
            switch(newa){
               case 37:
                   this.brickStylefu="width: 20px;height: 20px;position:absolute;top:300px;right: 350px;background-color: brown;"
                break; 
                 case 38:
                     this.brickStylefu="width: 20px;height: 20px;position:absolute;top:250px;right: 400px;background-color: brown;"
                break; 
                 case 39:
                     this.brickStylefu="width: 20px;height: 20px;position:absolute;top:300px;right: 450px;background-color: brown;"
                break; 
                 case 40:
                     this.brickStylefu="width: 20px;height: 20px;position:absolute;top:350px;right: 450px;background-color: brown;"
                break; 
            }
        }
    },methods:{
        brickStyle(){
           
        }
    }
  };
</script>
<style scoped>
  .chatmain{
    margin: 200px;
    padding-left: 100px;
  }
  .brickStyle{
      width: 20px;
      height: 20px;
      position:absolute;
      top:300px;
      right: 400px;
      background-color: brown;
  }
</style>